<template>
  <div class="questionnaire">
    <div class="search">
      <div style="flex: 1;">
        <div style = "display: inline-block; margin-top:20px;">
          <span>标题：</span>
          <el-input v-model = "queryParam.title" placeholder="请输入标题" style="width:154px;margin-right:20px" clearable></el-input>
        </div>
        <div style = "display: inline-block; margin-top:20px;">
          <span>题型大类：</span>
          <el-select v-model="queryParam.category1" 
              style="width:154px;margin-right:20px;height:36px">
              <el-option
              v-for = "(item1, index1) in category1OPtions"
              :key = "index1"
              :label = "item1.label"
              :value = "item1.value"
              ></el-option>
          </el-select>
        </div>
        <div style = "display: inline-block; margin-top:20px;">
          <span>题型小类：</span>
          <el-select v-model="queryParam.category2" 
              style="width:154px;margin-right:20px;height:36px">
              <el-option
              v-for = "(item1, index1) in category2OPtions"
              :key = "index1"
              :label = "item1.label"
              :value = "item1.value"
              ></el-option>
          </el-select>
        </div>
        <el-button
          type = "primary"
          style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;"
          @click = "query">查询</el-button>
        <el-button 
          style = "width:52px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
          @click = "resetQueryParam">重置</el-button>
      </div>
      <div>
        <el-button 
          type = "primary"
          v-if="this.permissionBycode.includes(this.code + '-xj')"
          @click = "create"
          style = "width:80px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
          ><i class="el-icon-plus el-icon--left"></i>新增试题</el-button>
          <el-button 
          type = "primary"
          v-if="this.permissionBycode.includes(this.code + '-xj')"
          @click = "create"
          style = "width:80px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
          >生成问卷</el-button>
      </div>
    </div>
    <div class="tableData" style="margin-top:20px;">
      <tableComponent :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
    </div>
    <div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
    
  </div>
</template>
<script>
let _that
export default {
  components: {
    tableComponent : () => import('../../../SuperviseAndReport/comonComponent/table'),
    popoverTable : () => import('@/components/Popup/popoverTable.vue'),
  },
  data() {
    return {
      code:'wzgl-jdjb-dcpg-tkgl',

      queryParam: {
        title:'', // 标题
        category1:'', // 题目大类：分页（5）,选择题（1），评分题（2），下拉题（3），填空题（4）
        category2: '', //段落（8）,单选题（1），多选题（2），评分单选（3），评分多选（4），单下拉题（5），多级下拉题（6），单项文本（7）
      },
      category1OPtions: [
        {label: '分页', value: '5'},
        {label: '选择题', value: '1'},
        {label: '评分题', value: '2'},
        {label: '下拉题', value: '3'},
        {label: '填空题', value: '4'},
      ],
      category2OPtions: [
        {label: '段落', value: '8'},
        {label: '单选题', value: '1'},
        {label: '多选题', value: '2'},
        {label: '评分单选', value: '3'},
        {label: '单下拉题', value: '4'},
        {label: '多级下拉题', value: '5'},
        {label: '单项文本', value: '6'},
      ],
      paginationPageSizes: [10, 30, 50],
      paginationParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 表格数据
      tableData: [],
      tableLabel: [
        { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
        { prop : 'title', label : '标题', minWidth: '500', fixed : false, render : false, align : 'center'},
        { prop : 'category1', label : '题型大类', minWidth: '150', fixed : false, render : false, align : 'center',
          render: (h, params, data) => {
            let statusLabel = _that.category1OPtions.find(item => item.value == params.row.category1) ? _that.category1OPtions.find(item => item.value == params.row.category1).label : ''
            return h('span', {}, statusLabel)
          }
        },
        { prop : 'category2', label : '题型小类', minWidth: '150', fixed : false, render : false, align : 'center',
          render: (h, params, data) => {
            let statusLabel = _that.category2OPtions.find(item => item.value == params.row.category2) ? _that.category2OPtions.find(item => item.value == params.row.category2).label : ''
            return h('span', {}, statusLabel)
          }
        },
        { prop : 'action', label : '操作', minWidth: '370', fixed : false, option: [],align : 'center',
          render : (h, params, data) => {
            let ckPress =  this.permissionBycode.includes(this.code + '-ck') // 查看权限
            let tjPress =  this.permissionBycode.includes(this.code + '-tj') // 提交权限
            let bjPress =  this.permissionBycode.includes(this.code + '-xg') // 编辑权限
            let scPress =  this.permissionBycode.includes(this.code + '-sc') // 删除权限
            let spPress =  this.permissionBycode.includes(this.code + '-sh') // 审批权限
            let fbPress =  this.permissionBycode.includes(this.code + '-fb') // 发布权限
            let ewmPress =  this.permissionBycode.includes(this.code + '-ewm') // 二维码权限
            let sjtjPress =  this.permissionBycode.includes(this.code + '-sjtj') // 数据统计权限
            return h( 'div', { }, [ 
              h( "el-button", {class:'', style:{display:ckPress ? 'inline-block' : 'none'}, props:{ type: 'text', size: 'mini' }, on : {
                click : () => {
  
                }
              } }, '查看' ),

               h( "el-button", {class:'', style:{display:bjPress && (params.row.publishStatus == '0' || params.row.publishStatus == '3') ? 'inline-block' : 'none'}, props:{ type: 'text', size: 'mini' }, on : {
                click : () => {

                }
              } }, '编辑' ),
              h( "popoverTable", {class:'popoverTable', style:{display:scPress && (params.row.publishStatus == '0' || params.row.publishStatus == '3') ? 'inline-block' : 'none'}, props:{popoverText: '确认删除此问卷调查吗？', popoverButtonText: '删除', clearOne: this.tableDelete ,id: params.row.id}, on : {
								click : () => {

								}
							} }, '删除'),
            ])
          } 
        }
      ],
      tableOption : {
        loading:false,
        stripe: false,
        highlightCurrentRow : false,
        border : true,
        height : 610,
        maxHeight : '',
        resizable: false,
        headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
        cellStyle: {height: '50px', padding: 0 }
      }
    }
  },
  computed:{
    permissionBycode(){
      return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
    }
  },
  mounted (){
    console.log('问卷调查')
    _that = this
    this.query_data()
  },
  methods: {
    // 列表查询接口调用
    query_data () {
      let data = JSON.parse(JSON.stringify(this.queryParam))
      data.pageNum = this.paginationParam.pageNum
      data.pageSize = this.paginationParam.pageSize
      this.Api.getQuestionBankListQuestion(data).then(res => {
        if (res && res.code === '0') {
          this.tableData = res.data.records
          this.paginationParam.total = res.data.total
          if (Math.ceil(this.paginationParam.total / this.paginationParam.pageSize) < this.paginationParam.pageNum) {
            this.paginationParam.pageNum = Math.ceil(this.paginationParam.total / this.paginationParam.pageSize)
            this.query_data()
          }
        } else {
          this.tableData = []
          this.paginationParam.total = 0
        }
      })
      
    },
    // 分页pageSize 改变触发事件 
    handleSizeChange(val) {
      this.paginationParam.pageSize = val
      this.query_data()
    },
    // 分页currentPage 改变触发事件
    handleCurrentChange(val) {
      this.paginationParam.pageNum = val
      this.query_data()
    },
    // 查询
    query () {
      this.query_data()
    },
    // 重置
    resetQueryParam () {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam)
      Object.assign(this.$data.paginationParam, this.$options.data().paginationParam)
      this.query_data()
    },
    // 把表格内的提交事件
    tableSubmit(id) {
      this.Api.getAssessmentListSubmitAssessment({id:id.toString()}).then(res => {
        if (res && res.code === '0') {
          this.$message.success('提交成功')
          this.query_data()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 表格内删除事件
    tableDelete(id) {
      this.Api.getAssessmentListDelAssessment({id:id.toString()}).then(res => {
        if (res && res.code === '0') {
          this.$message.success('删除成功')
          this.query_data()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 表格内发布事件
    tablePblish(id) {
      this.Api.getAssessmentListPublishAssessment({id:id.toString()}).then(res => {
        if (res && res.code === '0') {
          this.$message.success('发布成功')
          this.query_data()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 新建
    create() {
      this.$router.push('/index/PortalManagement/InvestigationAndEvaluation/QuestionnaireCreate')
    }
  }
}
</script>
<style lang="less" scoped>
.questionnaire{
  .search{
    display: flex;
  }
  .tableData{
    /deep/.el-button+.el-button{
      position: relative;
    }
    /deep/.el-button+.el-button:before{
      width: 1px;
      height: 12px;
      background: #DDDDDD;
      content: '';
      position: absolute;
      left: -6px;
    }
    /deep/.popoverTable+.el-button{
      position: relative;
      margin-left: 10px;
    }
    /deep/.popoverTable+.el-button:before{
      width: 1px;
      height: 12px;
      background: #DDDDDD;
      content: '';
      position: absolute;
      left: -6px;
    }
    /deep/.el-button+.popoverTable{
      position: relative;
      margin-left: 10px;
    }
    /deep/.el-button+.popoverTable:before{
      width: 1px;
      height: 12px;
      background: #DDDDDD;
      content: '';
      position: absolute;
      left: -6px;
      top: 6px;
    }
  }
  .questionnaireQRcode{
    /deep/.el-dialog__header{
      padding:10px 20px;
      background: #E6E9ED;
      border: 1px solid #E6E9ED;
    }
    .questionnaireQRcodeTitle{
      font-weight: 500;
      color: #333333;
      font-size: 18px;
    }
    .questionnaireQRcodeContent{
      display: flex;
      padding:0 20px;
      .questionnaireQRcodeLeft{
        img{
          width: 200px;
          height: 200px;
        }
      }
      .questionnaireQRcodeRight{
        flex: 1;
        padding-left: 40px;
      }
    }
  }
  .pagination_wrap {
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    right: 0;
    /deep/ .el-pagination {
    margin-top: 0;
    padding-top:20px;
    padding-bottom:20px;
    line-height: normal;
    }
  }
}
</style>